<template>
  <main>
    <div v-for="i,j in data" class="content">
      <span>{{ i.title }}</span>
      <span>{{ i.content }}</span>
      <span>是否公开  <el-switch :model-value="Boolean(i.status)" @click="change(i.id,i.status,i.title,i.content,j)"/></span>
      <p>
        <el-button type="success"  @click="()=>{isShow(i.id+'_'+2,i.id+'_'+1)}" :icon="Check" circle :id="i.id+'_'+1" style="visibility: hidden"/>
        <el-button type="success" @click="()=>{isShow(i.id+'_'+1, i.id+'_'+2)}" :id="i.id+'_'+2" style="visibility: visible">编辑</el-button>
        <el-button type="warning" @click="del(i.id,j)">删除</el-button>
      </p>
    </div>
  </main>
</template>
<script setup>
import axios from 'axios';
import { onBeforeMount,ref } from 'vue';
import {
  Check,
} from '@element-plus/icons-vue'
const data=ref([]);
function isShow(id,id2){
  document.getElementById(id2).style.visibility= "hidden";
  document.getElementById(id).style.visibility="visible";
}
function change(id,status,title,content,j){
  if(!id)return;
  axios.put('http://localhost:8080/posts/'+id,{
    id:id,
    status:!Boolean(status),
    title,
    content
  }).then(r=>{
    data.value[j]=r.data;
  })
}
function del(id,j){
  if(!id)return;
  axios.delete('http://localhost:8080/posts/'+id).then(r=>{
    data.value.splice(j,1);
  })
}
onBeforeMount(()=>{
  axios.get('http://localhost:8080/posts').then(r=>{
    data.value=r.data;
    console.log(data.value);
  })
})
</script>
<style scoped>
.content{
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 50vw;
  height: 10vh;
  border: 1px solid gray;
}
main{
  width: 100vw;
  height: fit-content;
  display: flex;
  flex-direction: column;
  align-items: start;
}
</style>